<template>
  <nut-config-provider :theme="theme" :theme-vars="themeVars">
    <view :style="{backgroundColor: 'white',padding: themeVars.pagePadding,height: '100vh'}">
      <nut-form
          v-if="!promoterInfo ||  promoterInfo.auditStatus == 'REJECT' "
          ref="formRef"
          :model-value="formData"
          :rules="formRules"
      >


        <nut-form-item label="姓名" prop="name">
          <nut-input
              v-model="formData.name"
              placeholder="请输入姓名"
              type="text"

          />
        </nut-form-item>

        <nut-form-item label="电话" prop="phone">
          <nut-input
              v-model="formData.phone"
              placeholder="请输入电话"
              type="text"

          />
        </nut-form-item>

        <nut-form-item label="申请地区" prop="area">
          <nut-input
              v-model="formData.area"
              placeholder="请输入申请地区"
              type="text"

          />
        </nut-form-item>


        <view style="display: flex;justify-content: center;margin: 20px 0">
          <nut-button color="#0073ff" style="width: 200px" @click="submit"> 保存</nut-button>
        </view>

        <view v-if="promoterInfo.auditStatus == 'REJECT' ">
          <nut-cell title="驳回原因">
            <template #desc>
              <span style="color: red">{{promoterInfo.rejectReason}}</span>
            </template>
          </nut-cell>
        </view>
      </nut-form>

      <view v-if="promoterInfo && promoterInfo.auditStatus == 'AUDIT' "
            style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center">
        <nut-space direction="vertical" align="center">
          <IconFont
              size="80"
              name="https://sdztl.oss-cn-hangzhou.aliyuncs.com/tuowulian-offline/images/other/%E5%AE%A1%E6%A0%B8%E4%B8%AD%20%281%29.png"
          ></IconFont>
          <span style="font-weight: bolder;font-size: 16px">审核中</span>
        </nut-space>

      </view>
      <view v-if="promoterInfo && promoterInfo.auditStatus == 'SUCCESS' "
            style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: start">
        <nut-space :gutter="50" direction="vertical" align="center" style="margin-top: 60px">
          <nut-space :gutter="10" direction="vertical" align="center">
            <span style="font-weight: bolder;font-size: 16px">{{promoterInfo.name}}</span>
            <span style="font-weight: bolder;font-size: 16px">{{promoterInfo.phone}}</span>
          </nut-space>
          <IconFont
              size="220"
              :name="promoterInfo.ercode"
          ></IconFont>
        </nut-space>

      </view>


    </view>
  </nut-config-provider>
</template>

<script  >
import {reactive, ref, toRaw} from 'vue';
import {IconFont} from '@nutui/icons-vue'
import useTheme from "../../../hooks/useTheme";
import Taro from "@tarojs/taro";
import {Phone1Reg} from "../../../utils/regUtils";
import Shop from "../../../components/shop/index.vue";
import {cloneDeep} from "lodash";
 import {  twPromoterMyDetail, twPromoterRegister} from "../../../api/promoter";
import {emptyUrl} from "../../../utils/imgUtils";
import {getFileName} from "../../../utils/strUtils";


const {theme, themeVars} = useTheme()

const formData = ref({
  name: '',
  phone: '',
  area: ''
})

const formRef = ref(null)

const formRules = {
  name: [{required: true, message: '请输入姓名'},],
  phone: [{required: true, message: '请输入手机号'},
    {
      validator: (val) => {
        return new Promise((resolve, reject) => {
          if (!Phone1Reg.test(val)) {
            reject('联系电话格式不正确')
          } else {
            resolve('')
          }
        })
      }
    }],
  area: [{required: true, message: '请输入地区'},],


}


const submit = () => {
  formRef.value?.validate().then(({valid, errors}) => {
    if (valid) {
      console.log('success:', formData.value)
      const data = cloneDeep(formData.value)
      twPromoterRegister(data).then(res => {
        getPromoterDetail()
      }).finally(() => {
        Taro.hideLoading();
      })

    } else {
      console.warn('error:', errors)
    }
  })
}

const promoterInfo = ref({});
const getPromoterDetail = () => {
  twPromoterMyDetail().then(res => {
    promoterInfo.value = res.data
    if(promoterInfo.value){
      formData.value = promoterInfo.value
    }
    console.log("promoterInfo", promoterInfo.value)
  }).finally(() => {
    Taro.hideLoading();
    Taro.stopPullDownRefresh();
  })
}



export default {
  methods: {

  },
  components: {IconFont},

  // 可以使用所有的 Vue 生命周期方法
  mounted() {
  },

  onLoad(options) {
    getPromoterDetail()

  },

  onReady() {
  },

  onShow() {
  },

  onHide() {
  },

  onPullDownRefresh() {
    getPromoterDetail()
    console.log("onPullDownRefresh")
  },
  onReachBottom() {
    console.log("onReachBottom")
  },


  setup() {


    return {
      theme,
      themeVars,
      Taro,

      promoterInfo,
      formData,
      formRef,
      formRules,
       submit,


    }
  }

}

</script>

<style>


</style>